
<script setup>

	import { ref } from 'vue';
	import port from './lib/port';
	import store from './lib/store';
	import useFunction from './hook/useFunction';
	import { onLoad, onBackPress } from "@dcloudio/uni-app";
	
	
	/** 词汇相关共享数据 */
	const storeData = store();
	
	/** 工具函数 */
	const toolFunction = useFunction();
	
	/** props */
	const props = defineProps(['learnId', 'learnType', 'appointmentId', 'categoryId']);

	/** 学习记录 id */
	const learnId = ref(0);

	/** 学习详情 */
	const learnInfo = ref({});

	/** 课程列表 */
	const courselist = ref([]);
	
	/** 课程 id */
	const courseId = ref('');
	
	/** 请求状态 */
	const loading = ref(true);
	
	/** 课程索引 */
	const courseIndex = ref('');
	
	/** 获取课程列表 */
	async function getCourselist() {
		const result = await port.getCourseList_api({ categoryId: props.categoryId || 1 });
		courselist.value = result;
		if (learnInfo.value?.course?.id) {
			const findIndex = result.findIndex(item => item.id === learnInfo.value?.course?.id);
			if (!!~findIndex) {
				courseIndex.value = findIndex;
				courseId.value = learnInfo.value?.course?.id;
			};
		};
		
		loading.value = false;
	};
	
	/** 获取课程详情 */
	const getCourseInfo = async () => {
		if (!props.learnId) {
			await getCourselist();
			return;
		};
		
		const result = await port.getCourseDetail_api({ id: props.learnId });
		learnInfo.value = result;
		
		/** 设置倒计时开始时间 */
		props.appointmentId && storeData.setCountdownStratTime(result.finishTime);
		await getCourselist();
	};

	/** 获取数据 */
	getCourseInfo();

	/** handle course info */
	const handleDetail = async ({ id }, index) => {
		courseId.value = id;
		courseIndex.value = index;
		props.learnId && await port.edirlearnCourse({ courseId: courseId.value, id: props.learnId });
	};

	/** to course word list */
	const begin = async () => {
		if(courseId.value) {
			let result = { id: props.learnId };
			if (!props.learnId) {
				result = await port.postStudy_api({ courseId: courseId.value });
				
			} else if (!learnInfo.value?.course) {
				await port.edirlearnCourse({ courseId: courseId.value, id: props.learnId });
			};
			
			/** 设置课程相关 */
			storeData.setCourse('index', courseIndex.value);
			storeData.setCourse('list', courselist.value);
			
			/** 设置参数 */
			storeData.setQuery({ learnId: result.id, courseId: courseId.value, learnType: props.learnType });
			uni.navigateTo({
				url: '/pages/course/word/plan'
			});
			
		} else {
			toolFunction.toast('请选择课程~');
		};
	};
	
	
</script>

<template>
	<view class="containerbox">
		<uv-navbar title="选择课程" auto-back placeholder />
		
		<template v-if="!loading && courselist.length">
			<scroll-view scroll-y class="containerbox">
				<view class="boxs">
					<view class="items" @click="handleDetail(item, index)" :class="{ actived: courseIndex === index }" v-for="item, index in courselist" :key="item.id">{{ item.name }}</view>
				</view>
			</scroll-view>
			
			<view class="flex items-center justify-between bottombox">
				<view class="btn bgc-primary" @click="begin">确认选择</view>
			</view>
		</template>
		
		<dw_default src="https://online-edu-test.mfy777.com/img/svg/empty.svg" v-if="!loading && !courselist.length" class="m-auto" label="暂未开通相关课程~" />
	</view>
</template>


<style lang="scss" scoped>
	@import "./style/common.scss";
	.containerbox{background-color: #fff}
	.boxs{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:8rpx 32rpx 1rpx}
	.items{width:48%;background-color:#f6f6f6;font-size:28rpx;height:120rpx;border-radius:12rpx;display:flex;align-items:center;justify-content:center;margin-bottom:24rpx;transition: all .3s;padding: 0 10rpx;text-align: center}
	.actived{background-color:#f69b2c;color:#fff}
</style>